<template>
  <div id="stage" class="_wrapper"></div>
</template>

<script>
import toolCanvas from "@/tool/canvas/tool-canvas.js";
import toolRandom from "@/tool/tool-random";

export default {
  data() {
    return {
      siteConfig: [
        {
          name: "节点A",
          code: "node1",
          riverCode: "hla",
          index: 5,
        },
        {
          name: "节点A",
          code: "node1",
          riverCode: "hla",
          index: 4,
        },
        {
          name: "节点A",
          code: "node1",
          riverCode: "hla",
          index: 3,
        },
        {
          name: "节点A",
          code: "node1",
          riverCode: "hla",
          index: 1,
        },
      ],
      riverConfig: [
        {
          name: "河流A",
          code: "hla",
          startNode: "root",
        },
        {
          name: "河流B",
          code: "hlb",
          startNode: "hla",
        },
        {
          name: "河流C",
          code: "hlc",
          startNode: "hla",
          endNode: "hla",
        },
        {
          name: "河流D",
          code: "hld",
          startNode: "hla",
        },
        {
          name: "河流E",
          code: "hle",
          startNode: "hlb",
          endNode: "hld",
        },
        {
          name: "河流F",
          code: "hlf",
          startNode: "hlb",
          endNode: "hld",
        },
        {
          name: "河流G",
          code: "hlg",
          startNode: "hlb",
          endNode: "hla",
        },
        {
          name: "河流H",
          code: "hlh",
          startNode: "root",
          endNode: "hla",
        },
      ],
    };
  },
  mounted() {
    const container = document.querySelector("#stage");

    toolCanvas.init(container);

    // toolCanvas.initAnmoin();

    let num = 1;
    let endNum = 1;
    let _riverConfig = this.riverConfig;

    (function countPos(parentCode = "root", left = 0) {
      let riverList = _riverConfig.filter(
        (item) => item.startNode === parentCode && !item._top
      );
      let currentNum = riverList.length - 1;
      riverList.forEach((item) => {
        item._left = parentCode === "root" ? 0 : currentNum-- * 50 + left;
        item._top = num++ * 50;
        countPos(item.code, item._left + 50);
      });
    })();

    _riverConfig.sort((a, b) => b._top - a._top);

    _riverConfig.forEach((item) => {
      let pTop = item._top;
      let endNodePos = [];
      let width = 3000;
      if (item.startNode !== "root") {
        pTop = _riverConfig.find((ri) => ri.code === item.startNode)._top;
      }
      if (item.endNode) {
        let cTop = _riverConfig.find((ri) => ri.code === item.endNode)._top;
        width = 3000 - endNum++ * 50;
        endNodePos = [width, cTop - item._top];
        // toolCanvas.addRing({ pos: endNodePos });
      }
      toolCanvas.addPath({
        pos: [50, item._top],
        points: [
          item._left,
          pTop - item._top,
          item._left,
          0,
          width,
          0,
          ...endNodePos,
        ],
        strokeColor: toolRandom.randomColor(),
      });
    });
  },
};
</script>

<style></style>
